<template>
  <div class="main-container">
    <div class="button-box">
      <button @click="getData" title="print current workbook data to console">
        Get Data
      </button>
    </div>
    <div class="sheel-box">
      <UniverSheet id="sheet" ref="univerRef" :data="data" />
    </div>
  </div>
</template>

<script setup lang="ts">
import UniverSheet from "./components/UniverSheet.vue";
import { DEFAULT_WORKBOOK_DATA } from "./assets/test-workbook-data";
import { ref } from "vue";

const data = ref(DEFAULT_WORKBOOK_DATA);
const univerRef = ref(null);

const getData = () => {
  const result = univerRef.value?.getData();
  console.log(JSON.stringify(result, null, 2));
};
</script>

<style scoped>
.main-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.button-box {
  height: 100px; /* 设置固定高度 */
  background-color: lightblue;
  align-content: center;
}

.sheel-box {
  flex-grow: 1; /* 自适应剩余空间 */
  background-color: lightgreen;
}
</style>
